import { defineComponent, watch, ref } from 'vue'
import { useHomeStore } from '@/store'
import { storeToRefs } from 'pinia'

// 定义主体
export default defineComponent({
  setup() {
    const home = useHomeStore();
    const { netTk } = storeToRefs(home);

    const chartRef = ref();
    let options = {}


    // 监听
    watch(
      () => netTk,
      (val: any) => {
        const { legendData, seriesData } = val.value
        options = {
          tooltip: {
            show: true,
            trigger: "item",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right:10,
            top: 'middle',
            data: legendData,
          },
          series: [
            {
              name: '网售渠道',
              type: 'pie',
              width: '80%',
              radius: ['40%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: seriesData
            }
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "200px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})

